<!--
    JBoss, Home of Professional Open Source
    Copyright 2015, Red Hat, Inc. and/or its affiliates, and individual
    contributors by the @authors tag. See the copyright.txt in the
    distribution for a full listing of individual contributors.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

<body>
<ui:composition template="/templates/template.xhtml">

    <ui:define name="title">Hello world JSF</ui:define>

    <ui:define name="body">
        <fieldset style="width:500px">
            <legend>Helloworld using JSF and RichFaces</legend>
            <p>
                This example demonstrates adding ajax processing and updating to a standard JSF component.
            </p>

            <p>
                In the example below, we have a standard JSF inputText with a nested RichFaces ajax tag. This ajax tag
                triggers an ajax request on every "keyup" event from the input box. The value of the input box is sent
                to the server where the backing bean is updated, and the "output" panelGroup is re-rendered, without
                requiring a full-page refresh.
            </p>
            <p>
                To see this example in action, begin typing in the input box, and watch as your text is echoed with
                html generated from the application server using an ajax call.
            </p>
            <rich:panel header="Ajax enabled inputText">
                <h:form id="helloWorldJsf">
                    <h:outputLabel value="Name:" for="nameInput"/>
                    <h:inputText id="nameInput" value="#{richBean.name}">
                        <a4j:ajax event="keyup" render="output"/>
                    </h:inputText>
                    <h:panelGroup id="output">
                        <h:outputText value="Hello #{richBean.name}!"
                                      rendered="#{not empty richBean.name}"/>
                    </h:panelGroup>
                </h:form>
            </rich:panel>
        </fieldset>
    </ui:define>
</ui:composition>
</body>
</html>
